<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from '../request.js';
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import type {UploadProps} from "element-plus";

const user = ref({})
const img = ref()
const username = ref()
const email = ref()
const age = ref()
const phone = ref()
const idCard = ref()
const address = ref()
const sex = ref()

const showPassword = ref(false)
const isShow1 = ref(false)
const isShow2 = ref(false)
const isShow3 = ref(false)
const isShow4 = ref(false)
const oldPassword = ref()
const newPassword1 = ref()
const newPassword2 = ref()

onMounted(() => {
  getUserInfo();
})

const getUserInfo = () => {
  axios.post("/user/getUserInfo").then(resp => {
    user.value = resp.date;
    img.value = resp.date[0].imageurl;
    username.value = resp.date[0].username;
    email.value = resp.date[0].email;
    age.value = resp.date[0].age;
    phone.value = resp.date[0].phone;
    idCard.value = resp.date[0].idCard;
    address.value = resp.date[0].address;
    sex.value = resp.date[0].sex;
  })
};

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  img.value = URL.createObjectURL(uploadFile.raw!)
  img.value = response.date;
  // 添加延时器
  setTimeout(() => {
    axios.post("/user/updateUserAvatar", null, {
      params: {
        username: username.value,
        imageUrl: response.date,
      }
    }).then(resp => {
      if (resp.code === 200) {
        ElMessage.success("保存成功");
      } else {
        ElMessage.error("保存失败");
      }
      getUserInfo();
    });
  }, 3000); // 延迟3秒（3000毫秒）
}

const updateUserInfo = (username, email, age, phone, idCard, address, sex) => {
  isShow1.value = false;
  axios.post("/user/updateUserInfo", null, {
    params: {
      username: username,
      email: email,
      age: age,
      phone: phone,
      idCard: idCard,
      address: address,
      sex: sex,
    }
  }).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("保存成功")
    } else {
      ElMessage.error("保存失败")
    }
    getUserInfo();
  })
};


const verifyOldPassword = () => {
  if (oldPassword.value !== user.value[0].password) {
    isShow3.value = true;
  }
}

const verifyNewPassword = () => {
  if (newPassword1.value !== newPassword2.value) {
    isShow4.value = true;
  }
}

const updatePasswordOk = () => {
  if (oldPassword.value == null) {
    ElMessage.warning("请输入原密码")
    return;
  }
  if (oldPassword.value !== user.value[0].password) {
    ElMessage.warning("原密码错误")
    return;
  }
  if (newPassword1.value == null) {
    ElMessage.warning("请输入新密码")
    return;
  }
  if (newPassword2.value == null) {
    ElMessage.warning("请再次输入新密码")
    return;
  }
  if (newPassword1.value !== newPassword2.value) {
    ElMessage.warning("两次输入的密码不一致")
    return;
  }

  isShow2.value = false;
  axios.post("/food/updatepasswordByusername", null, {
    params: {
      username: user.value[0].username,
      password: newPassword2.value
    }
  }).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("修改密码成功")
    } else {
      ElMessage.error("修改密码失败")
    }
    getUserInfo();
  })
};
</script>

<template>
  <div class="body">
    <div class="body-background">
      <div class="user-info">
        <div class="user-info-left">
          <div class="title">用户个人信息</div>
          <div class="user-info-left-info">
            <el-avatar class="avatar" shape="square" :src="img"/>
            <el-upload
                class="upload-demo"
                action="http://localhost:8090/food/updateuserimageurl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <el-button size="small" type="primary">点击上传头像</el-button>
            </el-upload>

            <h2>{{ username }}</h2>
            <p>{{ email }}</p>
          </div>
          <div class="button">
            <button @click="isShow1=true">修改用户信息</button>
            <button @click="isShow2=true">修改密码</button>
            <el-dialog v-model="isShow1" title="用户信息" width="500">
              <div class="username">用户名:
                <el-input v-model="username" readonly/>
              </div>
              <div class="email">邮箱:
                <el-input v-model="email"/>
              </div>
              <div class="age">年龄:
                <el-input v-model="age"/>
              </div>
              <div class="phone">联系电话:
                <el-input v-model="phone"/>
              </div>
              <div class="idCard">身份证:
                <el-input v-model="idCard"/>
              </div>
              <div class="address">地址:
                <el-input v-model="address"/>
              </div>
              <div class="sex">性别:
                <el-input v-model="sex"/>
              </div>
              <span style="color: red">修改后请保存!!!</span>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="isShow1 = false">取消</el-button>
                  <el-button type="primary" @click="updateUserInfo(username, email,age,phone,idCard,address,sex)">保存
                  </el-button>
                </div>
              </template>
            </el-dialog>
            <el-dialog v-model="isShow2" title="修改密码" width="500">
              <div class="input">
                <div class="oldPassword">旧密码
                  <el-input v-model="oldPassword" placeholder="请输入原密码" show-password @focus="isShow3=false"
                            @blur="verifyOldPassword"/>
                  <span v-if="isShow3" style="color:#eb2525;">原密码不正确</span>
                </div>
                <div class="newPassword">新密码:
                  <el-input v-model="newPassword1" placeholder="请输入要修改的密码" show-password
                            @focus="isShow4=false"/>
                </div>
                <div>确认密码:
                  <el-input v-model="newPassword2" placeholder="请再次输入要修改的密码" show-password
                            @focus="isShow4=false" @blur="verifyNewPassword"/>
                  <span v-if="isShow4" style="color:#ed1919;">两次输入密码不一致</span>
                </div>
              </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="isShow2 = false">取消</el-button>
                  <el-button type="primary" @click="updatePasswordOk">确定</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>

        <div class="user-info-right">
          <div class="otherInfo">
            <h3>其他信息：</h3>
            <div v-for="(item,index) in user" :key="index">
              <p>余额：{{ item.balance }}</p>
              <p>积分：{{ item.points }}</p>
              <p v-if="item.banned===0">状态：正常</p>
              <p>注册时间：{{ item.createTime }}</p>
              <p>修改时间：{{ item.updateTime }}</p>
              <p>其他邮箱：{{ item.email }}</P>
            </div>
          </div>

          <div class="personalInfo">
            <h3>个人信息：</h3>
            <div v-for="(item,index) in user" :key="index">
              <p>居住地：{{ item.address }}</p>
              <p>身份证号：{{ item.idCard }}</p>
              <p>年龄：{{ item.age }}</p>
              <p>性别：{{ item.sex }}</p>
              <p>联系方式：{{ item.phone }}</p>
              <p>
                密码：
                <span>{{ showPassword ? item.password : '******' }}</span>
                <button @click="showPassword = !showPassword">查看</button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.body-background {
  width: 1000px;
  height: 700px;
  background-color: #11bbf9;
  display: flex;
  justify-content: center;
  align-items: center;

}

.user-info {
  display: flex;
  width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-info-left {
  width: 400px;
  padding: 20px;
  text-align: center;
  border-right: 1px solid #f5f5f5;
  background-color: #e4e4e4;
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 60px;

}

.user-info-left-info {
  margin-top: 60px;
}

.avatar {
  width: 80px;
  height: 80px;
}

.button {
  margin-top: auto;
}

.button button {
  cursor: pointer;
  margin: 0 20px 10px 20px;
  font-size: 16px;
}

.button button:hover {
  color: #11bbf9;
  background-color: #f5f5f5;
}

.button button:nth-child(2) {
  width: 110px;
}

.oldPassword {
  margin: 0 0 15px 0;
}

.newPassword {
  margin: 0 0 15px 0;
}

.user-info-right {
  width: 400px;
  padding: 20px;
  background-color: #ffffff;
}

.personalInfo button {
  margin: 0 0 0 20px;
}

</style>
